<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>Mysql VS Cassandra</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!--<meta name="viewport"
		  content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
	<meta name="format-detection" content="telephone=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp"/>
	<link rel="alternate icon" type="image/png" href="/assets/i/favicon.png">
	<link rel="stylesheet" href="/assets/css/amazeui.min.css"/>
	<script src="/assets/js/echarts.min.js"></script>
	<!-- 引入 vintage 主题 -->
	<script src="/assets/js/theme/vintage.js"></script>
	<style>
		.get {
			background: #1E5B94;
			color: #fff;
			text-align: center;
			padding: 100px 0;
		}
		
		.get-title {
			font-size: 200%;
			border: 2px solid #fff;
			padding: 20px;
			display: inline-block;
		}
		
		.get-btn {
			background: #fff;
		}
		
		.detail {
			background: #fff;
		}
		
		.detail-h2 {
			text-align: center;
			font-size: 150%;
			margin: 40px 0;
		}
		
		.detail-h3 {
			color: #1f8dd6;
		}
		
		.detail-p {
			color: #7f8c8d;
		}
		
		.detail-mb {
			margin-bottom: 30px;
		}
		
		.hope {
			background: #0bb59b;
			padding: 50px 0;
		}
		
		.hope-img {
			text-align: center;
		}
		
		.hope-hr {
			border-color: #149C88;
		}
		
		.hope-title {
			font-size: 140%;
		}
		
		.about {
			background: #fff;
			padding: 40px 0;
			color: #7f8c8d;
		}
		
		.about-color {
			color: #34495e;
		}
		
		.about-title {
			font-size: 180%;
			padding: 30px 0 50px 0;
			text-align: center;
		}
		
		.footer {
			background: #2d3e50;
		}
		
		.footer p {
			color: #7f8c8d;
			margin: 0;
			padding: 15px 0;
			text-align: center;
		}
		
		/* 禁用响应式*/
		.am-container {
			width: 980px !important;
			max-width: none;
		}
		
		.get,
		.hope,
		.footer {
			min-width: 980px;
		}
		
		.am-topbar-collapse {
			clear: none;
			padding: 0 10px;
		}
		
		.am-topbar-nav {
			float: left;
			margin: 0;
		}
		
		.am-topbar-nav > li {
			display: inline-block;
			margin: 0 !important;
		}
		
		.am-topbar-collapse .am-dropdown.am-active .am-dropdown-content {
			position: absolute;
		}
		
		.am-topbar-nav > li > a {
			position: relative;
			line-height: 50px;
			padding: 0 10px;
		}
		
		.am-topbar-nav > li > a:after {
			position: absolute;
			left: 50%;
			margin-left: -6px;
			bottom: 0;
			content: "";
			display: inline-block;
			width: 0;
			height: 0;
			vertical-align: middle;
			border-bottom: 6px solid #f8f8f8;
			border-right: 6px solid transparent;
			border-left: 6px solid transparent;
			border-top: 0 dotted;
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
		
		.am-topbar-nav > li > a:hover:after {
			border-bottom-color: #666666;
		}
		
		.am-topbar-nav > li.am-dropdown > a:after {
			display: none;
		}
		
		.am-topbar-nav > li.am-active > a,
		.am-topbar-nav > li.am-active > a:hover,
		.am-topbar-nav > li.am-active > a:focus {
			border-radius: 0;
			color: #0e90d2;
			background: none;
		}
		
		.am-topbar-nav > li.am-active > a:after {
			border-bottom-color: #0e90d2;
		}
	</style>
</head>
<body>
<header class="am-topbar am-topbar-fixed-top">
	<div class="am-container">
		<h1 class="am-topbar-brand">
			<p>Cloud Computer Exam</p>
		</h1>
		
		<div class="am-topbar-collapse" id="collapse-head">
			<ul class="am-nav am-nav-pills am-topbar-nav">
				<li class="am-active"><a href="/chart">首页</a></li>
			</ul>
		</div>
	</div>
</header>

<div class="get">
	<div class="am-container">
		<h1 class="get-title">MySql 与 Cassandra 对比</h1>
		
		<p>
			因为对比测试一次需要花费大量的时间，目前展示的是已经测试过的数据。测试了4种情况下的数据库读写　：1、单个Mysql数据库，2、Mysql集群3结点数据库，3、Cassandra单节点数据库，4、Cassandra集群3节点数据库。<strong>读写</strong>也做了分类
			： 1、读：写-10:0 ，2、读：写-8：2 ，3、读:写-5:5 ，4、读：写-2:8 ， 5、读：写-0:10 。<strong>读写次数</strong>都是在20线程总共20万次的条件下进行。
		</p>
		<p>
			如果你想再测试一次，你可以点击页眉处的<strong>再跑一次</strong>,你将进入测试环境，请等待一会儿！
		</p>
	</div>
</div>

<div class="detail">
	<div class="am-container">
		<h2 class="detail-h2">使用了echart来实现数据可视化，数据展示如下，使用了柱状图</h2>
		
		<div id="main" style="width: 1000px;height:700px;">
		
		</div>
	</div>
</div>

<div class="hope">
	<div class="am-g am-container">
		<div class="am-u-sm-6 hope-img">
			<img src="/assets/i/examples/landing.png" alt=""
				 data-am-scrollspy="{animation:'slide-left', repeat: false}">
			<hr class="am-article-divider am-show-sm-only hope-hr">
		</div>
		<div class="am-u-sm-6">
			<h2 class="hope-title">同我们一起打造你的前端框架</h2>
			
			<p>
				在知识爆炸的年代，我们不愿成为知识的过客，拥抱开源文化，发挥社区的力量，参与到Amaze Ui开源项目能获得自我提升。
			</p>
		</div>
	</div>
</div>

<footer class="footer">
	<div class="am-container">
		<p>© 2014 <a href="http://www.yunshipei.com" target="_blank">AllMobilize, Inc.</a> Licensed under <a
				href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. by the AmazeUI Team.</p>
	</div>
</footer>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    // myChart.app.title = '堆叠柱状图';
    myChart.showLoading();

    function f(n) {
        var a = new Array(3);
        for (var j = 0; j < 3; j++) {
            a[j] = new Array(n);
        }
        return a;
    }

    function getDate() {
        $.ajax({
            type: 'POST',
            url: '/chart/result',
            dataType: "json",
            success: function (data) {
                var XName = [];
                var Info10_0 = f(2), Info8_2 = f(2), Info5_5 = f(2), Info2_8 = f(2), Info0_10 = f(2);
                var j = 0;
                for (var i in data) {
                    if (i < 2)
                        XName.push(data[i].type);

                    console.info(j + "     " + i % 2);
                    console.info(data[i].result[4]);
                    Info10_0[j][i % 2] = data[i].result[0];
                    Info8_2[j][i % 2] = data[i].result[1];
                    Info5_5[j][i % 2] = data[i].result[2];
                    Info2_8[j][i % 2] = data[i].result[3];
                    Info0_10[j][i % 2] = data[i].result[4];
                    if (i % 2 == 1)
                        j++;
                }
                myChart.hideLoading();
                myChart.setOption({
                    baseOption: {
                        timeline: {
                            // y: 0,
                            axisType: 'category',
                            // realtime: false,
                            // loop: false,
                            autoPlay: true,
                            // currentIndex: 2,
                            playInterval: 1000,
                            // controlStyle: {
                            //     position: 'left'
                            // },
                            data: [
                                '测试1', '测试2', '测试3'
                            ]
                        },
                        title: {
                            subtext: '数据来自测试'
                        },
                        tooltip: {},
                        legend: {
                            x: 'right',
                            data: ['读写-10：0 ', '读写- 8：2 ', '读写- 5：5 ', '读写- 2：8 ', '读写- 0：10 ']
                        },
                        calculable: true,
                        grid: {
                            top: 80,
                            bottom: 100,
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow',
                                    label: {
                                        show: true,
                                        formatter: function (params) {
                                            return params.value.replace('\n', '');
                                        }
                                    }
                                }
                            }
                        },
                        xAxis: [
                            {
                                'type': 'category',
                                'axisLabel': {'interval': 0},
                                'data': XName
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                name: 'ms（毫秒）'
                            }
                        ],
                        series: [
                            {name: '读写-10：0 ', type: 'bar'},
                            {name: '读写- 8：2 ', type: 'bar'},
                            {name: '读写- 5：5 ', type: 'bar'},
                            {name: '读写- 2：8 ', type: 'bar'},
                            {name: '读写- 0：10 ', type: 'bar'}
                        ]
                    },
                    options: [
                        {
                            title: {text: '20线程 单线程100次 共2000次'},
                            series: [
                                {data: Info10_0[2]},
                                {data: Info8_2[2]},
                                {data: Info5_5[2]},
                                {data: Info2_8[2]},
                                {data: Info0_10[2]}
                            ]
                        },
                        {
                            title: {text: '20线程 单线程1000次 共20000次'},
                            series: [
                                {data: Info10_0[1]},
                                {data: Info8_2[1]},
                                {data: Info5_5[1]},
                                {data: Info2_8[1]},
                                {data: Info0_10[1]}
                            ]
                        },
                        {
                            title: {text: '20线程 单线程10000次 共200000次'},
                            series: [
                                {data: Info10_0[0]},
                                {data: Info8_2[0]},
                                {data: Info5_5[0]},
                                {data: Info2_8[0]},
                                {data: Info0_10[0]}
                            ]
                        }
                    ]
                });
            }
        });
    }

    getDate();
</script>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/assets/js/amazeui.min.js"></script>
</body>
</html>
